<template>
	<view class="readingHistory">
		<view class="item" v-for="item in list" :key="item.id" @click="clickItem(item)">
			<view class="content">
				<image class="cover" :src="item.cover_img" lazy-load ></image>

				<view class="box">
					<view class="title">{{ item.name }}</view>

					<view class="time">
						<text>最近阅读：</text>
						<text>{{ dayjs.unix(item?.updated_at || '').format('YYYY-MM-DD HH:mm') }}</text>
					</view>
				</view>
			</view>

			<view class="btn" :class="{ join: item.bookshelfStatus }" @click.stop="_setBookshelfStatus(item)"
				v-if="!isEdit">
				<text>{{ item.bookshelfStatus == 1 ? '已加书架' : '加入书架' }}</text>
			</view>

			<view class="round" :class="{ selected: val.includes(item.id) }" v-else>
				<uni-icons type="checkmarkempty" size="16" color="#fff"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue'
	import dayjs from 'dayjs'
	import { setBookshelfStatus } from '@/api/index'
	import { ReadingBook } from '@/types/index'

	interface Props {
		modelValue : number[],
		list : ReadingBook[],
		isEdit : boolean
	}

	const props = withDefaults(defineProps<Props>(), {
		isEdit: false
	})

	const emit = defineEmits(['update:modelValue', 'gotoBook'])

	const val = computed({
		get: () => {
			return props.modelValue
		},
		set: (val : number[]) => {
			emit('update:modelValue', val)
		}
	})

	const _setBookshelfStatus = async (item : ReadingBook) => {
		try {
	
			const {
				bookshelfStatus
			} = await setBookshelfStatus({
				novel_id: item.id,
				bookshelfStatus: item.bookshelfStatus === 0 ? 1 : 0
			})
		
			item.bookshelfStatus = bookshelfStatus
		} catch (e) {
			//TODO handle the exception
		}
	}

	const clickItem = (item : ReadingBook) => {
		if (props.isEdit) {
			if (val.value.includes(item.id)) {
				val.value = val.value.filter(num => num != item.id)
			} else {
				val.value.push(item.id)
			}
		} else {
			// #ifdef MP-WEIXIN
			if (!item.book_id) return
		
			emit('gotoBook', item.book_id,item.gotowx)
			// #endif

			// #ifndef MP-WEIXIN
			if (!item.id) return
			emit('gotoBook', item.id)
			// #endif
		}
	}
</script>

<style scoped lang="scss">
	.readingHistory {
		padding-bottom: 24rpx;

		.item {
			padding: 30rpx;
			background: #fff;
			@include flex($align: center);
			flex-wrap: nowrap;

			.content {
				padding-right: 20rpx;
				flex: 1;
				@include flex($align: center);
				flex-wrap: nowrap;

				.cover {
					@include size(144rpx, 180rpx);
					border-radius: 8rpx;
				}

				.box {
					margin-left: 24rpx;
					flex: 1;
					overflow: hidden;

					.title {
						@include tx(32rpx);
						color: #373737;
						font-weight: 600;
						@include omit(1);
					}

					.time {
						margin-top: 24rpx;
						@include tx(24rpx);
						color: #B6B6B6;
					}
				}
			}

			.btn {
				padding: 16rpx 24rpx;
				@include tx(28rpx, 32rpx);
				color: #FE7A16;
				background: #F7F7F7;
				border-radius: 32rpx;
				transition: all .4s;

				&.join {
					color: #9A9A9A;
					background: #F0F0F0;
				}
			}

			.round {
				@include size(40rpx);
				border: 1px solid #F1F1F1;
				border-radius: 50%;
				background: rgba(255, 255, 255, 1);
				transition: all .4s;
				@include center(flex);

				&:deep(.uni-icons) {
					opacity: 0;
					transition: all .4s;
				}

				&.selected {
					border-color: #FE7A16;
					background: #FE7A16;

					&:deep(.uni-icons) {
						opacity: 1;
					}
				}
			}
		}
	}
</style>